<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 2. 内部样式表 写在 style 标签内部  少量，页面使用的样式 -->
    <style>
        /* 语法 选择器{ 样式 } 
        选择器 希望将后面的样式应用给 【哪些】 元素
      */
        
        button {
            background-color: gold;
            color: yellowgreen;
        }
    </style>

    <!-- 3. 单独的 css 文件，通过 link 标签引入
        适合于，css 文件多个页面需要使用
      -->
    <link rel="stylesheet" href="./css/index.css" />
    <title>Document</title>
</head>

<body>
    <!-- 1. 行内样式，style 属性="样式名：值;样式名 2：值;"  基本不用 -->
    <!-- css的优先级：就近原则  目前：行内优先级最高  -->
    <button style="background-color: brown; color: chartreuse">点我</button>
    <button style="background-color: brown; color: chartreuse">购买</button>
    <button>美诚</button>
    <button>月饼</button>
</body>

</html>